<template>
	<view class="box">
		<!-- 搜索商品 -->
		<view class="header">搜索商品</view>
		<!-- 底部内容 -->
		<view class="bottom">
			<view class="left">
				<view class="item" @click="changeIndex(index)" :class="{active:currentIndex==index}" v-for="(nav,index) in cList" :key="index">{{nav.name}}</view>
			</view>
			<scroll-view scroll-y="true" class="right">
				<!-- 图片 -->
				<image :src="goodInfo.imgUrl" class="logo"></image>
			<!-- 底下的商品 -->
			<view class="goods">
				<view class="good" v-for="(item,index) in goodInfo.subCateList" :key="index">
				<image :src="item.wapBannerUrl" class="img1"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			</scroll-view>
			
			
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
export default {
	data() {
		return {
			currentIndex:0
		};
	},
	//挂在完毕
	mounted() {
		//获取分类的数据
		this.getCategoryList();
	},
	methods:{
		//获取分类数据
		getCategoryList(){
			this.$store.dispatch('categoryLists');
		},
		//修改对应索引值，切换高亮状态
		changeIndex(index){
			this.currentIndex = index;
		}
	},
	computed:{
		//捞取仓库中的数据
		...mapState({
				 cList:state=>state.category.cList
		}),
		//右侧显示商品的数据
		goodInfo(){
			return this.cList[this.currentIndex] ||{}
		}
	}
};
</script>

<style lang="stylus" scoped>
.box
	width 100%
	height 100%
	.header
		width 80%
		height 60rpx
		margin 10rpx auto
		background #bbb
		text-align center
		line-height 60rpx
	.bottom
		width 100%
		display flex
		border-top 1px solid #bbb
		.left
			width 150rpx
			.item
				width 100%
				height 80rpx
				font-size 28rpx
				text-align center
				line-height 80rpx
			.active
				background: hotpink
				border-bottom: 1px solid black
		.right
			flex 1
			height calc(100vh - 60rpx)
			border-left 1rpx solid #bbb
			.logo
				width: 80%
				display: block
				margin: 20rpx auto
				height: 190rpx
			.goods
				display: flex
				flex-wrap: wrap
				.good
					width: 33.33%
					margin-top: 20rpx
					display: flex
					flex-direction: column
					align-items: center
					.img1
						width:100%
						height: 144rpx
</style>
